import React, { useState } from 'react';
import { Button } from 'antd'
import './style.css'
const Index: React.FC = () => {
  // 获取节点 ref
  const inputRef = React.useRef<HTMLInputElement | null>(null)
  // 上传的图片的base64的数组集合
  const [urls, setUrls] = useState<string[]>([]);
  // 开关：拖拽是否进入 upload 区域
  // true  进入
  // false 离开
  const [isEnter, setIsEnter] = useState(false);
  // 点击上传事件
  const handleClick = () => inputRef.current?.click()
  // 监听选中文件改变事件
  const onChange = () => {
    // 获取input节点
    const input = inputRef.current as HTMLInputElement;
    // 获取上传的文件列表并转化为数据
    const files = Array.from(input.files as FileList);
    // 遍历文件列表
    files.forEach(file => {
      // 调用上传函数
      upload(file)
    })
  }
  // 上传文件函数
  const upload = (file: File) => {
    // 创建文件读取实例
    const fr = new FileReader();
    // 开启读取文件， 按照DataURL（图片会base64读取）
    fr.readAsDataURL(file);
    // 绑定 load事件， 该事件执行了说明 文件读取完毕
    fr.addEventListener('load', () => {
      // 保存读取出来的内容 到 urls
      setUrls(urls => [...urls, fr.result as string])
    })
  }

  // 拖放在 目标元素 松手事件
  const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
    // 阻止默认行为： 浏览起默认会打开图片
    e.preventDefault();
    // 获取拖拽的文件列表
    const files = Array.from(e.dataTransfer.files);
    // 遍历上传
    files.forEach(file => {
      upload(file)
    })
    // 开关
    setIsEnter(false)
  }
  return (
    <div>
      <input
        multiple
        ref={inputRef}
        type="file"
        style={{ display: 'none' }}
        onChange={() => onChange()}
      />
      <div 
        className='upload' 
        onDrop={(e) => onDrop(e)} 
        onDragOver={e => e.preventDefault() /* 阻止默认行为： 浏览器默认不会触发onDrop */}
        onDragEnter={() => setIsEnter(true)}
        onDragLeave={() => setIsEnter(false)}
        style={{ 
          border: isEnter ? '1px solid blue' : '1px #ccc dashed',
          background: isEnter ? 'skyblue': 'white'
         }}
      >
        <Button onClick={() => handleClick()}>点击上传</Button>
        <h2>
          { isEnter ? '释放上传的文件' : '拖拽进入该区域上传'}
        </h2>
      </div>

      <div>
        {
          urls.map((v, i) => {
            return <img key={i} src={v} height={100} style={{ margin: 10 }} alt="" />
          })
        }
      </div>
    </div>
  )
}


export default Index
